import React from 'react'

import './style.scss'

class LoadMore extends React.Component{
    constructor(props, context){
        super(props, context)
    }
    render() {
        return (
            <div className='load-more' ref="wrapper">
                {
                    this.props.isLoadingMore
                    ? <span>加载中。。。。</span>
                    : <span onClick = {this.loadMoreHandle.bind(this)}>加载更多</span>
                }
            </div>
        )
    }
    componentDidMount() {
        const loadMoreFn = this.props.loadMoreFn
        const wrapper = this.refs.wrapper
        let tiomOUtId
        function callBack() {
            const top = wrapper.getBoundingClientRect().top
            const windowHeight = window.screen.height
            if(top && top < windowHeight) {
                loadMoreFn()
            }
        }
        window.addEventListener('scroll', function() {
            if (this.props.isLoadingMore) {
                return
            }
            if (tiomOUtId) {
                clearTimeout(tiomOUtId)
            }
            tiomOUtId = setTimeout(callBack, 50)
        }.bind(this), false)
    }

    loadMoreHandle() {
        this.props.loadMoreFn()
    }
}

export default LoadMore